<template>
  <div class="mod-sys__role">
    <el-form :inline="true" :model="state.dataForm" @keyup.enter="state.getDataList()">
      <el-form-item>
        <el-input v-model="state.dataForm.id" placeholder="ID" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="state.dataForm.company" placeholder="请输入关键字" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <!-- 0待处理  1待调用企业验证企业名称接口  2待调用详情接口  3处理完成 -->
        <el-select v-model="state.dataForm.status" placeholder="请选择数据状态" clearable>
          <el-option v-for="item in [
            { key: '0', value: '待处理' },
            { key: '1', value: '企业名待验证' },
            { key: '2', value: '企业名验证通过' },
            { key: '3', value: '处理完成' },
            { key: '9', value: '未处理' },
            { key: '-1', value: '无效' }
          ]" :key="item.key" :label="item.value" :value="item.key"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input v-model="state.dataForm.userName" placeholder="请输入操作人" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="state.dataForm.prod" placeholder="请输入采购意向" clearable></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="state.getDataList()">{{ $t("query") }}</el-button>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetQuery()">重置</el-button>
      </el-form-item>
      <el-form-item>
      <!--
        <el-button v-if="state.hasPermission('sys:role:save')" type="primary" @click="addOrUpdateHandle()">{{ $t("add") }}</el-button>
        -->
<!--        <el-button type="primary" @click="addOrUpdateHandle()">{{ $t("add") }}</el-button>-->
      </el-form-item>
      <el-form-item>
        <el-button type="danger" @click="unUsedHandle()">无效</el-button>
      </el-form-item>
      <el-form-item>
        <!--
        <el-button v-if="state.hasPermission('sys:role:delete')" type="danger" @click="state.deleteHandle()">{{ $t("deleteBatch") }}</el-button>
        -->
<!--        <el-button type="danger" @click="state.deleteHandle()">{{ $t("deleteBatch") }}</el-button>-->
      </el-form-item>
    </el-form>
    <el-table v-loading="state.dataListLoading" :data="state.dataList" border @selection-change="state.dataListSelectionChangeHandle" @sort-change="state.dataListSortChangeHandle" style="width: 100%">
      <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
      <el-table-column prop="id" label="ID" header-align="center" align="center" width="80"></el-table-column>
      <el-table-column prop="company" label="公司名称" header-align="center" align="center" min-width="150"></el-table-column>
      <el-table-column prop="name" label="姓名" header-align="center" align="center" width="120"></el-table-column>
      <el-table-column prop="phone" label="联系电话" header-align="center" align="center" width="120"></el-table-column>
      <el-table-column prop="posi" label="职位" header-align="center" align="center" width="120"></el-table-column>
      <el-table-column prop="email" label="邮箱" header-align="center" align="center" min-width="120"></el-table-column>
      <el-table-column prop="prod" label="采购意向" header-align="center" align="center" min-width="120"></el-table-column>
      <el-table-column prop="area" label="地址" header-align="center" align="center" min-width="120"></el-table-column>
      <el-table-column prop="status" label="状态" header-align="center" align="center" width="130">
        <template v-slot="scope">
          <!-- 0待处理  1待调用企业验证企业名称接口  2待调用详情接口  3处理完成 -->
          <el-tag v-if="scope.row.status === 9" type="danger">未处理</el-tag>
          <el-tag v-else-if="scope.row.status === 0" type="warning">待处理</el-tag>
          <el-tag v-else-if="scope.row.status === 1" type="warning">企业名待验证</el-tag>
          <el-tag v-else-if="scope.row.status === 2" type="success">企业名验证通过</el-tag>
          <el-tag v-else-if="scope.row.status === 3" type="warning">处理完成</el-tag>
          <el-tag v-else-if="scope.row.status === -1" type="warning">无效</el-tag>
          <el-tag v-else type="success">已处理</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="updaterName" label="操作人" header-align="center" align="center" width="130"></el-table-column>
      <el-table-column prop="updateTime" label="操作时间" header-align="center" align="center" width="130"></el-table-column>
      <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
        <template v-slot="scope">
          <el-button type="primary" v-if="scope.row.status === 9" link @click="addOrUpdateHandle(scope.row.id)">{{ $t("update") }}</el-button>
          <el-button type="primary" v-else link style="color: gray;">{{ $t("update") }}</el-button>
          <!--
          <el-button type="primary" link @click="state.deleteHandle(scope.row.roleId)">{{ $t("delete") }}</el-button>
          -->
        </template>
      </el-table-column>
    </el-table>
    <el-pagination :current-page="state.page" :page-sizes="[10, 20, 50, 100]" :page-size="state.limit" :total="state.total" layout="total, sizes, prev, pager, next, jumper" @size-change="state.pageSizeChangeHandle" @current-change="state.pageCurrentChangeHandle"> </el-pagination>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update ref="addOrUpdateRef" @refreshDataList="refreshDataList"></add-or-update>
  </div>
</template>

<script lang="ts" setup>
import useView from "@/hooks/useView";
import { reactive, ref, toRefs } from "vue";
import AddOrUpdate from "./company-add-or-update.vue";
import { ElMessage, ElMessageBox } from 'element-plus'
import baseService from "@/service/baseService";

const view = reactive({
  getDataListURL: "/noc/companybasicinfotmp/page",
  getDataListIsPage: true,
  deleteURL: "/noc/companybasicinfotmp",
  deleteIsBatch: true,
  limit: 20,
  dataForm: {
    id: "",
    company: "",
    status: "",
    userName: "",
    prod: ""
  }

});

//刷新数据
const refreshDataList = () => {
  state.refreshDataList();
};

const state = reactive({ ...useView(view), ...toRefs(view) });

const addOrUpdateRef = ref();
const addOrUpdateHandle = (roleId?: number) => {
  addOrUpdateRef.value.init(roleId, {
    cid: state.dataForm.id,
    keyword: state.dataForm.company,
    cStatus: state.dataForm.status,
    cUpdaterName: state.dataForm.userName,
    cProd: state.dataForm.prod
  });
};
const resetQuery = () => {
  // 1. 清空筛选条件
  state.dataForm.id        = "";
  state.dataForm.company   = "";
  state.dataForm.status    = "";
  state.dataForm.userName  = "";
  state.dataForm.prod = "";

  // 2. 重新查询（一般会回到第一页）
  state.page = 1;
  state.getDataList();
};
const unUsedHandle = () => {

  if (state.dataListSelections!.length === 0) {
    return ElMessage.warning("请选择至少一个");
  }

  let ids: number[] = [];
  for (let i = 0; i < state.dataListSelections!.length; i++) {
    ids.push(state.dataListSelections![i].id);
  }

  // 确认对话框
  ElMessageBox.confirm('确定要将选中的记录标记为无效吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 提取选中项的id数组
    const ids = state.dataListSelections?.map(item => item.id)
    baseService.post("/noc/companybasicinfotmp/unUsed", ids).then(res => {
      // 模拟成功
      ElMessage.success('操作成功')
      state.getDataList()
    });

  }).catch(() => {
    // 用户取消操作
  })
};


</script>
